<template>
	<view class="orderDetils-view" v-if="order">
		<OrderStatus @download="download" :count="1" :status="status" :paybutton="paybutton" :statusBtn="statusBtn" :buyerState="order.orderState" :item="order" :saleState="order.orderStatus" :logistics="logistics"
			@changeStatus="changeStatus" :Ordertimeout="Ordertimeout"></OrderStatus>
		<view class="order-main">
			<view class="order-addr" v-if="isShowAddr">
				<OrderAddr :isClick="order.orderState == 0?true:false" @selectAddr="selectAddr" v-if="defAddr">
					<text slot="addr">{{defAddr.detailsAddress}} {{defAddr.streetAddress}} {{defAddr.city}}</text>
					<view slot="nameMobile">{{defAddr.firstName}} {{defAddr.lastName}} {{defAddr.phoneNumber}}</view>
				</OrderAddr>
				<OrderAddr :isClick="order.orderState == 0?true:false" @selectAddr="selectAddr" :isPay="order.id" isNot="true" v-else>
					<view slot="not">{{$t("confirmOrder.not")}}</view>
				</OrderAddr>
			</view>

			<view class="cancel-order" v-if="order.bidId">
				{{$t('order.hint2')}}
			</view>

			<view class="return-goods" v-if="statusBtn">
				<!-- <view class="return-goods-up">
					<view class="retuen-cause">
						{{$t("orderDetail.retuenReason")}}
					</view>
					<view class="select-cause" @click="show = !show">
						{{$t("orderDetail.retuenReason")}}
						<image src="../../static/icon/image_44.png" mode=""></image>
					</view>
				</view> -->
				<view class="return-goods-down">
					<view class="retuen-desc">
						<view class="retuen-desc-up">
							{{$t("orderDetail.returnDesc")}}
						</view>
						<input type="text" v-model="returnDesc" :placeholder="$t('orderDetail.descPla')">
					</view>
					<!-- <view class="upload-img"> -->
					<!-- <image src="../../static/icon/image_24.png" mode=""></image> -->
					<!-- <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="9"></u-upload>
					</view> -->
					<view class="img-list">
						<view class="img-item" v-if="imgList.length > 0" v-for="(item,index) in imgList" :key="item">
							<image :src="item" mode="aspectFit"></image>
							<view class="del" @click="delImg(index)" v-if="item">
								<u-icon name="close-circle-fill" size="18"></u-icon>
							</view>
						</view>
					</view>

					<view class="upload-btn" v-if="imgList.length < 9" @tap="imgMax">
						<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="9">
							<view class="upload-img" style="flex: 1;">
								{{$t("goodsReleased.uploadPictures")}}
							</view>
						</u-upload>
					</view>

				</view>

				<u-picker :show="show" :columns="range" @confirm="confirm" @cancel="show = !show" @close="show = !show"
					closeOnClickOverlay></u-picker>
			</view>
			<view class="order-logistics" v-if="order.orderState == 7">
				<OrderLogistics>
					<view slot="up">
						<view class="">
							{{$t("orderDetail.expressCompany")}}： {{order.expressCompany}}
						</view>
						<view class="" style="margin-top: 6rpx;">
							{{$t("orderDetail.orderNum")}}： {{order.expressNum}}
						</view>
					</view>
					<view slot="down">
						{{order.createOrderTime}}
					</view>
				</OrderLogistics>
			</view>
			<view class="order-item" v-if="!statusBtn">
				<OrderDetilsItem :desc="order"></OrderDetilsItem>
			</view>

			<!-- <view class="pay-view">
				<view class="certificate-desc">
					{{$t('orderDetail.hint6')}}
				</view>
				<view class="pay-font">
					paypal
				</view>
			</view> -->

			<view class="certificate-view" v-if="auImgs">
				<view class="certificate-desc">
					{{$t('orderDetail.hint4')}}
				</view>
				<view class="certificate-img">
					<view class="" v-for="item in auImgs" :key="item">
						<image class="certificate" :src="item" @tap="clickImg(item)" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view class="pay-view" v-if="order.authenticate">
				<!-- <view class="certificate-desc">
					{{$t('orderDetail.hint6')}}
				</view> -->
				<view class="pay-font">
					{{order.authenticate}}{{$t("orderDetail.hint8")}}:{{companyEmail}}
				</view>
			</view>

			<view class="certificate-view" v-if="order.downPicture">
				<view class="certificate-desc">
					{{$t('orderDetail.hint5')}}
				</view>
				<view class="certificate-img">
					<view class="" v-for="item in pickImgs" :key="item">
						<image class="certificate" :src="item" @tap="clickImg(item)" mode="aspectFit"></image>
					</view>
				</view>
			</view>

      <!-- 订单信息 -->
			<view class="order-cost">
				<view class="row-sty">
					<view class="cost-left">
						{{$t("orderDetail.freight")}}
					</view>
					<view class="cost-right">
<!--						$ {{order.freightMoney}}-->
            $ {{ flog ? -(order.freightMoney || 0) : (order.freightMoney || 0) }}
					</view>
				</view>
				<view class="row-sty">
					<view class="cost-left">
						{{$t("orderDetail.charge")}}
					</view>
					<view class="cost-right">
<!--						$ {{order.serviceMoney?order.serviceMoney:0}}-->
            $ {{ flog ? -(order.serviceMoney || 0) : (order.serviceMoney || 0) }}
					</view>
				</view>
				<view class="row-sty">
					<view class="cost-left">
						{{$t("orderDetail.tax")}}
					</view>
					<view class="cost-right">
<!--						$ {{order.tax}}-->
            $ {{ flog ? -(order.tax || 0) : (order.tax || 0) }}
					</view>
				</view>
				<view class="row-sty">
					<view class="cost-left">
						{{$t("orderDetail.userVip")}}
					</view>
					<view class="cost-right">
<!--						$ {{order.vmoney?order.vmoney:0}}-->
						$ {{ flog ? -(order.vmoney || 0) : (order.vmoney || 0) }}
					</view>
				</view>
				<view class="row-sty">
					<view class="cost-left">
						{{$t("orderDetail.pay")}}
					</view>
					<view class="cost-right">
<!--            $ {{order.overMoney}}-->
						$ {{
              String(
                  flog
                      ? order.overMoney
                      - 2 * (order.freightMoney || 0)
                      - 2 * (order.serviceMoney || 0)
                      - 2 * (order.tax || 0)
                      - 2 * (order.vmoney || 0)
                      : order.overMoney || 0
              ).replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')
            }}
					</view>
				</view>

				<view class="row-sty" v-if="order.payState">
					<view class="cost-left">
						{{$t("orderDetail.hint6")}}
					</view>
					<view class="cost-right">
						{{order.payState==6?$t("orderDetail.hint7"):order.payState}}
					</view>
				</view>
			</view>

			<view class="order-msg">
				<view class="order-msg-up">
					<view class="order-num">
						{{$t("orderDetail.orderNums")}}: {{order.orderNum}}
					</view>
					<view class="order-copy" @tap="copy">
						{{$t("orderDetail.copy")}}
					</view>
				</view>
				<view class="order-msg-down">
					{{$t("orderDetail.orderTime")}}：{{order.createOrderTime}}
				</view>
				<view class="order-msg-down" v-if="order.paymentTime&&order.payState">
					{{$t("orderDetail.payTime")}}：{{order.paymentTime}}
				</view>
			</view>
			<!-- 去付款 -->
			<view class="btn" v-if="(order.orderState == 0 || order.orderState == 60) && order.payState != 6 &&paybutton" @tap="goPay">
				{{$t("orderDetail.goPay")}}
			</view>
			<view class="btn" v-if="statusBtn" @click="affirmReturn">
				{{$t("orderDetail.confirmReturn")}}
			</view>
			<Popup :desc="isReturn" @operate="operate" :top="top" v-if="showPopup">
				<view>
					{{$t("orderDetail.applyReturnOne")}}
				</view>
				<view>
					{{$t("orderDetail.applyReturnTwo")}}
				</view>
				<view>
					{{$t("orderDetail.applyReturnThree")}}
				</view>
			</Popup>
			<MaskComp :isShow="showPopup"></MaskComp>
			<MaskComp :fbShow="fbShow"></MaskComp>
			<PopupMsg v-if="fbShow" :top="top">
				<view slot="one">
					{{$t("orderDetail.okReturnOne")}}
				</view>
				<view slot="two">
					{{$t("orderDetail.okReturnTwo")}}
				</view>
				<view slot="three">
					{{$t("orderDetail.okReturnThree")}}：3{{$t("orderDetail.day")}}
				</view>
			</PopupMsg>
		</view>

		<u-popup :show="bigImgShow" @close="bigImgShow=false" mode="center" closeOnClickOverlay>
			<movable-area scale-area @tap="bigImgShow=false">
				<movable-view direction="all" scale="true" scale-min="1" scale-max="4" :scale-value="scale"
					@dblclick="dblclick" :scale="true">
					<image :src="bigImg" mode="widthFix"></image>
				</movable-view>
			</movable-area>
		</u-popup>
	</view>
</template>

<script>
	import OrderStatus from "../../components/OrderStatus/OrderStatus"
	import OrderAddr from "../../components/OrderAddr/OrderAddr"
	import OrderDetilsItem from "../../components/OrderDetilsItem/OrderDetilsItem"
	import OrderLogistics from "../../components/OrderLogistics/OrderLogistics"
	import Popup from "../../components/Popup/Popup"
	import MaskComp from "../../components/MaskComp/MaskComp"
	import PopupMsg from "@/components/PopupMsg/PopupMsg.vue"
	import {
		API_URL
	} from "@/env.js"
	import { addReturnGoods, updateOrder, detailedDownload,getOneUserAddr, getCommDetail,getOrderDetail,getAboutUs  } from "@/common/api.js"

	export default {
		data() {
			return {
        //是否是卖家信息
        flog:false,
				// 订单超时
				Ordertimeout: '',
				scale: 1,
				bigImgShow: false,
				bigImg: null,
				orderId: null,
				order: null,
				isReturn: this.$t("orderDetail.confirmReturn"),
				fileList: [],
				showPopup: false,
				show: false,
				isShowAddr: null,
				count: "",
				fileList1: [],
				imgList: [],
				status: "",
				logistics: "",
				auImgs: null,
				pickImgs: null,
				statusBtn: false,
				fbShow: false,
				top: 0,
				companyEmail: null,
				defAddr: null,
				parms: {
					morebagPublishPictures: [{
						picture: ""
					}],
					commodity: ""
				},
				returnDesc: "",
				// item: [{
				// 	id: "1",
				// 	goodsName: "FENDI BY THE WAY BAG WAY BAG WAY BAG",
				// 	classify: "颜色分类：A5 Bougainvillier",
				// 	price: "1,4995",
				// 	count: "20"
				// }],
				range: [
					["哈哈", "嘿嘿", "嘻嘻", "呵呵", "啦啦"]
				],
				// 控制支付按钮显示
				paybutton:true,
				// 当前登录人
				userid:""
			}
		},
		methods: {
			clickImg(item) {
				this.bigImg = item;
				this.bigImgShow = true;
			},
			dblclick() {
				if (this.scale == 10) {
					this.scale = 1;
				} else {
					this.scale = 10;
				}
			},
			// 去付款
			async goPay() {
				if(!this.defAddr) {
					uni.showToast({
						icon: 'none',
						title: this.$t("orderDetail.hint3"),
						duration: 1200
					})
					return
				}

				// const res = await updateOrder({
				// 	id: this.order.id,
				// 	addressId: this.defAddr.id,
				// });
				if(this.order.address) {
					console.log("添加地址完成，去付款");
					this.parms.morebagPublishPictures[0].picture = this.order.picture[0].picture;
					this.parms.commodity = this.order.commodityName;
					this.parms.commodityEn = this.order.commodityNameEn;
					uni.navigateTo({
						url: `/pages/selectPay/selectPay?item=${encodeURIComponent(JSON.stringify(this.parms))}&price=${this.order.overMoney}&orderId=${this.order.id}`,
					})
				}
			},
			// 复制订单号
			copy() {
				const text = this.order.orderNum;
				const hint = this.$t("orderDetail.hint");
				uni.setClipboardData({
					data: text,
					success: function(res) {
						// console.log('复制的信息：', text);
						uni.showToast({
							title: hint,
						});
					}
				});
			},
			// 选择地址
			selectAddr() {

				uni.navigateTo({
					url: `/pages/addrManage/addrManage?pay=1&isGoPay=${this.order.id}&orderState=${this.order.orderState}&orderStatus=${this.order.orderStatus}`
				})
			},
			// 删除图片
			delImg(index) {
				this.imgList.splice(index, 1);
			},
			// 判断图片最大值
			imgMax() {

			},
			async download(id) {
				uni.navigateTo({
					url: "/pages/viewPDF/viewPDF?id=" + id
				})
				// const res = await detailedDownload(id);
				// console.log(res);
			},
			// 新增图片
			afterRead(event) {
				console.log(this.imgList.length, this.imgList);
				console.log(event.file);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(lists.length);
				this.imgNum = lists.length;
				for (let i = 0; i < lists.length; i++) {
					const result = this.uploadFilePromise(lists[i].url)
					result
						.then((res) => {
							console.log(res.msg);
							this.imgList.push(res.msg);
							this.queryParams.imgs.push(res.msg);
						})
						.catch((res) => {
							console.log(res);
						})
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					// let token = uni.getStorageSync('token')
					// console.log(token);
					let a = uni.uploadFile({
						url: API_URL + '/oss/upload',
						filePath: url,
						name: 'file',
						timeout: 5000,
						header: {
							// 'Authorization': token
						},
						success: (res) => {
							console.log(res);
							const data = JSON.parse(res.data)
							resolve(data)
						},
						fail: (res) => {
							setTimeout(() => {
								console.log(res);
								reject(res)
							}, 1000)
						},
					});
				})
			},
			changeStatus(value) {
				this.statusBtn = value;
			},
			async affirmReturn() {
				// const query = uni.createSelectorQuery()
				// query.select('.orderDetils-view').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				// query.exec(res => {
				// 	this.top = res[0].top;
				// 	this.showPopup = true;
				// });
				console.log(this.imgList, this.returnDesc);
				if (this.imgList.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t('orderDetail.hint1'),
						duration: 1300,
						mask: true
					})
					return
				}

				if (!this.returnDesc) {
					uni.showToast({
						icon: 'none',
						title: this.$t('orderDetail.hint2'),
						duration: 1300,
						mask: true
					})
					return
				}

				const res = await addReturnGoods({retGoodsCause: this.returnDesc, retGoodsPicture: this.imgList.join(","), orderId: this.order.id, sparel: this.order.addUserId});
				const resOrder = await updateOrder({orderState: 10, orderStatus: 10, id: this.order.id});
				uni.redirectTo({
					url:"/pages/myOrder/myOrder"
				})

			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			operate(value) {
				const query = uni.createSelectorQuery()
				query.select('.orderDetils-view').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					this.top = res[0].top;
					this.showPopup = !this.showPopup;
					if (value == "confirm") {
						this.fbShow = value;
					}
				});

				console.log(value);
			},
			confirm() {
				console.log("退货理由已选择");
			},
			async initAddr() {
				if(!this.order.addressId) {
					this.isShowAddr = true;
					return
				}
				const res = await getOneUserAddr(this.order.addressId);
				console.log(res);
				if(res) {
					this.defAddr = res;
					this.isShowAddr = true;
				} else {
					this.isShowAddr = true;
				}

				// console.log(this.defAddr);
			},
			async initAuImg() {
				const res = await getCommDetail(this.order.shopId);
				console.log(res);
				if(res.code == 200) {
					if(res.data.authenticity) {
						this.auImgs = res.data.authenticity.split(",");
						console.log(res.data.authenticity.split(","));
					}

				}
			},
			async initOrder() {
				const res = await getOrderDetail(this.orderId);
				if(res.code == 200) {
					this.order = res.data;

					if(this.order.paymentTime&& !this.order.payState){
						this.Ordertimeout=this.$t("orderDetail.Ordertimeout")
					}
					console.log(this.Ordertimeout,"超时")
					this.userid=uni.getStorageSync("userInfo");
					if(this.order.addUserName!=this.userid.userName){
						this.paybutton=false
					}
					if(this.order.downPicture){
						this.pickImgs = this.order.downPicture.split(",");
					}
					this.status = this.order.orderState;
					this.initAuImg();
					this.initAddr();
				}
			},
			async initCompany() {
				const res = await getAboutUs();
				if(res.code == 200) {
					this.companyEmail = res.data.companyMail;
				}
			}
			// userSelectAddr() {
			// 	const selAddr = uni.getStorageSync("selectAddr");
			// 	if (selAddr) {
			// 		this.defAddr = selAddr;
			// 		uni.removeStorageSync("selectAddr");
			// 	}
			// }
		},
		components: {
			OrderStatus,
			OrderAddr,
			OrderDetilsItem,
			OrderLogistics,
			Popup,
			MaskComp,
			PopupMsg
		},
		onLoad(options) {
			console.log(options,'=====');
			// this.count = options.count;
			// this.logistics = options.logistics;
			// this.initAddr();

			this.orderId = options.id;
      if (options.flog)
        this.flog=options.flog
      console.log(111,this.flog)
		},
		onShow() {
			// this.userSelectAddr();
			this.initOrder();
			this.initCompany();
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("orderDetail.title")
			});
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.orderDetils-view {
		width: 100%;
		background-color: #FBFBFB;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}

	.orderDetils-view {
		padding-bottom: 20rpx;
	}

	.cancel-order {
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
		font-size: 26rpx;
		color: #717171;
		font-weight: bold;
		text-align: center;
		margin-top: 32rpx;
		padding: 20rpx 0;
	}

	.pay-view {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		color: #000;
		font-weight: bold;
		font-size: 30rpx;
		margin: 20rpx 0;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;

		.certificate-desc {
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
		}

		.pay-font {
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.certificate-view {
		width: 100%;
		height: 220rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		color: #000;
		font-weight: bold;
		font-size: 30rpx;
		margin: 20rpx 0;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;
		// line-height: 2%;

		.certificate-desc {
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
		}

		.certificate-img {
			display: flex;
			overflow-x: scroll;

			.certificate {
				margin-top: 20rpx;
				width: 230rpx;
				height: 130rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
		}
	}

	.order-main {
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.order-addr {
			height: 152rpx;
			border-radius: 20rpx;
			background-color: #fff;
			box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
		}

		.order-logistics {
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
			height: 152rpx;
			width: 100%;
			margin-top: 20rpx;
		}

		.order-item {
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;
			margin-top: 20rpx;
			height: 208rpx;
		}

		.order-cost {
			width: 100%;
			height: 328rpx;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.row-sty {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				border-bottom: 2rpx solid #F1F1F1;

				.cost-left {
					color: #858585;
					font-family: PingFang SC;
					font-weight: regular;
					font-size: 24rpx;
					width: 100%;
				}

				.cost-right {
					color: #FF0000;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					width: 100%;
					text-align: right;
				}
			}

			.row-sty:last-child {
				border-bottom: none;
			}
		}

		.order-msg {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			width: 100%;
			height: 160rpx;
			padding: 20rpx 24rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.order-msg-up {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F1F1F1;

				.order-num {
					color: #858585;
					font-family: PingFang SC;
					font-weight: regular;
					font-size: 24rpx;
				}

				.order-copy {
					margin-right: 38rpx;
					color: #FAAD67;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
				}
			}

			.order-msg-down {
				flex: 1;
				display: flex;
				align-items: center;
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}
		}

		.btn {
			width: 100%;
			height: 90rpx;
			border-radius: 20rpx;
			background: #000000;
			color: #FFFFFF;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			line-height: 90rpx;
			text-align: center;
			margin-top: 36rpx;
			margin-bottom: 20rpx;
		}

		.return-goods {
			// height: 428rpx;
			margin-top: 32rpx;

			.return-goods-up {
				display: flex;
				align-items: center;

				.retuen-cause {
					margin-left: 52rpx;
					color: #000000;
					font-family: PingFang SC;
					font-weight: regular;
					font-size: 24rpx;
				}

				.select-cause {
					margin-left: 30rpx;
					color: #858585;
					font-family: PingFang SC;
					font-weight: regular;
					font-size: 24rpx;
					line-height: 58rpx;
					flex: 1;
					height: 62rpx;
					padding-left: 40rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					background: #FFFFFF;
					border: 2rpx solid #80808019;
					margin-right: 20rpx;
					position: relative;

					image {
						transform: rotate(90deg);
						width: 45rpx;
						height: 45rpx;
						position: absolute;
						top: 8rpx;
						right: 30rpx;
					}
				}
			}

			.return-goods-down {
				// height: 338rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				overflow: hidden;
				margin-top: 24rpx;
				display: flex;
				flex-direction: column;

				.retuen-desc {
					height: 74rpx;
					display: flex;
					align-items: center;
					background-color: #fff;

					.retuen-desc-up {
						margin-left: 52rpx;
						color: #000000;
						font-family: PingFang SC;
						font-weight: regular;
						font-size: 24rpx;
					}

					input {
						margin-left: 30rpx;
						font-family: PingFang SC;
						font-weight: regular;
						font-size: 24rpx;
						flex: 1;
						height: 62rpx;
						padding-left: 40rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						background: #FFFFFF;
						margin-right: 30rpx;
					}

					input::placeholder {
						padding-left: 40rpx;
						color: #858585;
						font-weight: normal;
					}
				}
			}
		}
	}

	.img-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		// justify-content: space-around;
		background-color: #FBFBFB;

		.img-item {
			position: relative;

			image {
				height: 100rpx;
				width: 100rpx;
				margin: 20rpx 20rpx;
			}

			.del {
				position: absolute;
				right: -8rpx;
				top: 0rpx;
			}
		}
	}

	.u-upload {
		// margin-top: 24rpx;
		background-color: #FBFBFB;
		width: 100%;
		position: relative;
	}

	.upload-img {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #858585;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		background-color: #fff;
		border-radius: 10px;
		border: 1px solid rgba(128, 128, 128, 0.1);
		text-align: center;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		// margin-bottom: 200rpx;
	}

	.upload-btn {
		width: 100%;
		height: 88rpx;
	}
</style>
